<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <input type="text" placeholder="输入数字" v-model="number" @input="show" v-show="selectVal">
    <div v-show="!selectVal">
      选择是否单选/多选
      <select v-model="selectVal">
        <option>单选</option>
        <option>多选</option>
      </select>
    </div>
    <div v-if="selectVal == '单选'">
      <div v-for="(v, i) in arr" :key="i">
        <input name="aaa" type="radio" id="v">{{v}}
      </div>
    </div>
    <div v-if="selectVal == '多选'">
      <div v-for="(v, i) in arr" :key="i">
        <input name="aaa" type="checkbox" id="v">{{v}}
      </div>
    </div>
    <!-- <input type="checkbox"> 111 -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        number: '',
        selectVal: null,
        num_1: ['A', 'B', 'C', 'A1', 'B1', 'C1', 'A2', 'B2', 'C2'],
        arr: []
      },
      methods: {
        show() {
          let n = this.number * 1
          if (n > this.num_1.length || n < 0) {
            throw new Error('数字必须大于0且不大于9')
          }
          this.arr = this.num_1.slice(0, this.number)
        }
      }
    })

  </script>
</body>

</html>
